<!--
    数据大屏展示页面
-->
<template>
    <div class="sum">

        <!--手机端显示-->
        <div class="header" style="padding: 20px; text-align: center;" v-if="mobile">
            <h2 style="letter-spacing:6px;">
                一般固废收运数据展板
            </h2>
        </div>

        <!--电脑端显示-->
        <header v-if="!mobile">
            <!--插槽-->
            <div style="text-align: right; padding-top:  0.2rem;">
                <slot></slot>
            </div>
            <h2 style="letter-spacing:6px;">一般固废数据展板</h2>
            <div class="showTime">
                <span class="time">{{ nowTime }}</span>
                <span class="date">
                    <span>{{ date }} {{ week }}</span>
                </span>
            </div>
        </header>

        <!-- 左边数据统计 -->
        <section :class="mobile ? 'mainbox1' : 'mainbox'">

            <div class="item center" v-if="mobile">
                <div class="resume">
                    <!--                    <dv-border-box-8>-->
                    <!--                    </dv-border-box-8>-->
                    <div class="resume-hd">
                        <ul>
                            <li>
                                <countTo :startVal="startVal" :endVal="customerSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">家</span>
                            </li>
                            <li>
                                <countTo :startVal="startVal" :endVal="plasticbottleSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">{{plasticUnit}}</span>
                            </li>
                            <li>
                                <countTo :startVal="startVal" :endVal="glassbottleSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">{{glassUnit}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="resume-bd">
                        <ul>
                            <li>服务机构数</li>
                            <li>输液瓶总产量</li>
                            <li>玻璃瓶总产量</li>
                        </ul>
                    </div>
                </div>
                <div class="map" style="text-align: right;">
                    <a-button ghost
                              style="color: #F5F5F5; border-color: #F5F5F5;z-index: 9999;margin-right: 10px;"
                              @click="clickBackMap" v-if="deepTree.length > 1">
                        <a-icon type="left"/>
                        {{' 返 回 '}}
                    </a-button>
                    <div class="chart chart_map" id="chart_map"></div>
                </div>
            </div>

            <!--左边数据统计-->
            <div class="item left">
                <div class="panel">
                    <h2>分类统计</h2>
                    <business :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>收运占比</h2>
                    <talent :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>近半年一般固废回收量统计</h2>
                    <income :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
            </div>

            <!-- 中间数据统计 电脑端 -->
            <div class="item center" v-if="!mobile">
                <div class="resume">
                    <div class="resume-hd">
                        <ul>
                            <li>
                                <countTo :startVal="startVal" :endVal="customerSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">家</span>
                            </li>
                            <li>
                                <countTo :startVal="startVal" :endVal="plasticbottleSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">{{plasticUnit}}</span>
                            </li>
                            <li>
                                <countTo :startVal="startVal" :endVal="glassbottleSum" :duration="6000"
                                         separator=""></countTo>
                                <span style="font-size: 16px;">{{glassUnit}}</span>
                            </li>
                        </ul>
                    </div>

                    <div class="resume-bd">
                        <ul>
                            <li>服务机构数</li>
                            <li>输液瓶总产量</li>
                            <li>玻璃瓶总产量</li>
                        </ul>
                    </div>
                </div>
                <div class="map" style="text-align: right;">
                    <a-button ghost
                              style="color: #F5F5F5; border-color: #F5F5F5;z-index: 9999;margin-right: 10px;"
                              @click="clickBackMap" v-if="deepTree.length > 1">
                        <a-icon type="left"/>
                        {{' 返 回 '}}
                    </a-button>
                    <div class="chart chart_map" id="chart_map"></div>
                    <div class="map1"></div>
                    <div class="map2"></div>
                </div>
            </div>

            <!-- 右边数据统计 -->
            <!-- 右边数据统计 -->
            <div class="item right">
                <div class="panel">
                    <h2>各区县产生处置统计</h2>
                    <wordCloud :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>医疗机构分布</h2>
                    <distribution :areaCode="String(areaCode)" :areaLevel="String(areaLevel)"/>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel">
                    <h2>收运记录实时展示</h2>
                    <history :areaCode="String(areaCode)" :areaLevel="String(areaLevel)" :realRecycleData = "realRecycleData" />
                    <div class="panel-footer"></div>
                </div>
            </div>
        </section>

    </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { mixinDevice } from '@/utils/mixin.js'
import { WebsocketMixin } from '@/mixins/WebsocketMixin'

import { getCityJSON, getDistrictsJSON, getProvinceJSON } from './common/get-json'
import { cityProvincesMap } from './common/cityProvincesMap'
import { mapOption } from './common/mapOption'
import countTo from 'vue-count-to'

import business from '@/components/companySummary/business' // 业务范围
import talent from '@/components/companySummary/talent' // 人才队伍
import income from '@/components/companySummary/income' // 营业收入
import wordCloud from '@/components/companySummary/wordCloud' // 产品热词
import distribution from '@/components/companySummary/distribution' // 客户分布
import history from '@/components/companySummary/history' // 发展历程

export default {
    name: 'screenView',
    components: {
        business,
        talent,
        income,
        wordCloud,
        distribution,
        history,
        countTo
    },
    mixins: [mixinDevice, WebsocketMixin],
    data() {
        let areaName = '贵州省';
        let areaCode = '520000';
        let areaLevel = 'province';

        let user = this.$store.getters.userInfo;
        if(user){
            if(user.provinceCode){
                areaLevel = 'province';
                areaCode = user.provinceCode;
                if(user.province){
                    areaName = user.province;
                } else {
                    areaName = cityProvincesMap.provincesCode[areaCode]
                }
            }
            if(user.cityCode){
                areaLevel = 'city'
                areaCode = user.cityCode;
                if(user.city){
                    areaName = user.city;
                } else {
                    areaName = cityProvincesMap.areaMap1[areaCode]
                }
            }
            if(user.areaCode){
                areaLevel = 'district'
                areaCode = user.areaCode;
                if(user.area){
                    areaName = user.area;
                } else {
                    areaName = 'areaName'
                }
            }
        }
        return {
            // socket 连接地址
            socketUrl: '/websocket/',
            chart: null, // 实例化echarts
            provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json
            provincesCode: cityProvincesMap.provincesCode, // 市行政区划，用于查找对应json
            areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据
            cityMap: cityProvincesMap.areaMap1, // 省行政区划，用于数据的查找，按行政区划查数据
            mapData: [], // 当前地图上的地区
            deepTree: [],// 点击地图时push，点返回时pop
            areaName, // 当前地名
            areaCode, // 当前行政区划
            areaLevel, // 当前级别   province省   市city  区/县district
            nowTime: '',
            week: '',
            date: '',
            startVal: 0,
            guiYangData: [],
            customerSum: 0, // 服务机构数
            plasticbottleSum: 0, // 输液瓶总产量
            glassbottleSum: 0, // 玻璃瓶总产量
            // countWasteWeight: 0, // 医废总产量
            glassUnit: '千克',
            plasticUnit: '千克',
            glassPlasticWeightSum: 0,
            dataStatus: '',
            areaDataObj: {},
            mapDataSource: [],
            dataSource: [
                // {
                //     name: '贵阳市',
                //     code : '520100',
                //     lat : [106.61, 26.64],
                //     value: 10,
                //     level: 3
                // }
            ],
            realRecycleData:{},
        }
    },
    computed: {
        mobile: function() {
            return this.isMobile()
        }
    },
    destroyed() {
        this.$notification.destroy()
    },
    mounted() {
        // 获取时间
        this.nowTimes()
        // 获取地图
        this.$nextTick(() => {
            let params = {
                areaName: this.areaName,
                areaCode: this.areaCode,
                areaLevel: this.areaLevel
            }
            if(this.areaLevel == 'province'){
                this.requestGetProvinceJSON(params)
            }
            else if(this.areaLevel == 'city'){
                this.requestGetCityJSON(params)
            }
            else if(this.areaLevel == 'district'){
                this.requestGetDistrictsJSON(params)
            }
            this.chart.on('click', this.echartMapClick)
        })

        //定时刷新地图动画
        if (this.timer1) {
            clearInterval(this.timer1)
        } else {
            // 10秒钟刷新一次
            let time = (1000 * 10)
            this.timer1 = setInterval(() => {
                this.refreshChartMap(1)
            }, time)
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
        clearInterval(this.timer1)
    },
    methods: {
        getCustomerLevel: function(cus) {
            let level = 0
            if (cus) {
                if (cus.supervise == 0) {
                    level = 1
                }
                if (cus.supervise == 1) {
                    level = 2
                }
                if (cus.supervise == 2) {
                    level = 3
                }
            }
            return level
        },
        // -----------接收 socket 消息 ---------------
        websocketOnmessage: function(res) {
            console.log(' -----------接收 socket 消息 ---------------')
            // 接收用户提交的信息
            let result = JSON.parse(res.data);
            if (result.cmd == 'plastic_bottle') {
                // 接收到socket 消息  newData = Object
                let newData = JSON.parse(result.data)
                this.realRecycleData = newData
                let obj = {}
                // 当前显示的是省级地图
                if (this.areaLevel == 'province') {
                    this.mapDataSource.forEach((val, index) => {
                        // 显示省级地图，则是用cityCode来进行判断
                        if (newData.cityCode && (parseInt(newData.cityCode) == parseInt(val.areaCode))) {
                            obj = {
                                name: val.areaName,
                                code: val.areaCode,
                                lat: val.properties.center,
                                level: this.getCustomerLevel(newData),
                                time: new Date().getTime()
                            }
                        }
                    })
                }
                // 当前显示的是市级地图
                if (this.areaLevel == 'city') {
                    this.mapDataSource.forEach((val, index) => {
                        // 显示省级地图，则是用areaCode来进行判断
                        if (newData.areaCode && (parseInt(newData.areaCode) == parseInt(val.areaCode))) {
                            obj = {
                                name: val.areaName,
                                code: val.areaCode,
                                lat: val.properties.center,
                                level: this.getCustomerLevel(newData),
                                time: new Date().getTime()
                            }
                        }
                    })
                }
                // 当前显示的是区/县地图
                if (this.areaLevel == 'district' && (newData.areaCode == this.areaCode) && (newData.latitude && newData.longitude)) {
                    obj = {
                        name: newData.areaName,
                        code: newData.areaCode,
                        lat: [newData.longitude, newData.latitude],
                        level: this.getCustomerLevel(newData),
                        time: new Date().getTime()
                    }
                }
                let len = this.dataSource.length
                if (obj && obj.code) {
                    let state = true
                    let time = new Date().getTime()
                    this.dataSource.forEach((val, index) => {
                        // 时间大于10秒
                        if ((val.code == obj.code) && ((time - val.time) > (1000 * 10))) {
                            this.dataSource[index] = val
                            state = false
                        }
                    })
                    // latitude 纬度， longitude 经度
                    if (state) {
                        if(newData.latitude && newData.longitude){
                            obj['lat'] = [newData.longitude,newData.latitude];
                        }
                        this.dataSource.push(obj)
                        // 发送通知
                        this.$notification.open({
                            key: 'customer_submit_waste',
                            // message: `【${newData.customerName}】回收废物通知`,
                            description: `【${newData.recyclePersonName}】正在【${newData.customerName}】回收废物`,
                            placement: 'bottomRight',
                            duration: 10
                        })
                    }
                    if (this.dataSource.length != len) {
                        // 重新设置echart信息
                        let res = this.deepTree[this.deepTree.length - 1]['mapData']
                        this.setEchartsOption(this.areaName, res, res.features)
                    }
                }
            }
        },
        // 加载省级地图
        requestGetProvinceJSON(params) {
            // console.log('省级地图params', params)
            // 调用获取省JSON接口(参数：areaCode(默认贵州省))
            let res = getProvinceJSON(params.areaCode)
            if (!(res && res.features)) {
                return
            }
            let state = true
            this.deepTree.forEach((item) => {
                if (item['params']['areaCode'] == params.areaCode) {
                    state = false
                }
            })
            // 如果不存在，就往地图容器中添加数据
            if (state) {
                this.deepTree.push({ mapData: res, params: params })
            }
            // 调用地图初始化方法
            this.initEchantsMap(params.areaName, res, res.features)

        },

        // 加载市级地图
        requestGetCityJSON(params) {
            // console.log('市级地图params', params)
            // 调用获取市JSON接口()
            let res = getCityJSON(params.areaCode)
            if (!(res && res.features)) {
                return
            }
            let state = true
            console.log('deepTree',this.deepTree);
            this.deepTree.forEach((item) => {
                if (item['params']['areaCode'] == params.areaCode) {
                    state = false
                }
            })
            if (state) {
                this.deepTree.push({ mapData: res, params: params })
            }
            this.initEchantsMap(params.areaName, res, res.features)
        },

        // 加载区县级地图
        requestGetDistrictsJSON(params) {
            // console.log('县级地图params', params)
            let res = getDistrictsJSON(params.areaCode)
            if (!(res && res.features)) {
                return
            }
            let state = true
            this.deepTree.forEach((item) => {
                if (item['params']['areaCode'] == params.areaCode) {
                    state = false
                }
            })
            if (state) {
                this.deepTree.push({ mapData: res, params: params })
            }
            this.initEchantsMap(params.areaName, res, res.features)
        },

        // 地图点击
        echartMapClick(params) {
            // console.log('echartMapClick ==> ',params)
            let info = params.data
            if (info) {
                this.areaName = info.areaName;
                this.areaLevel = info.areaLevel;
                this.areaCode = info.areaCode;

                // if (info.areaName in this.provincesMap) {
                //     this.areaCode = info.areaCode;
                //     this.areaLevel = info.areaLevel;
                //     //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
                //     this.requestGetProvinceJSON({areaName: info.areaName, areaCode: info.areaCode});
                // } else
                // if (info.areaName in this.areaMap) {
                //     //显示县级地图
                //     this.requestGetCityJSON(info)
                // } else {
                //     this.requestGetDistrictsJSON(info)
                // }
            } else {
                let name = params.name
                let item = null
                this.mapDataSource.forEach((val) => {
                    if (val.name == name) {
                        item = val
                    }
                })
                if (item) {
                    let params = {
                        areaName: item.areaName,
                        areaLevel: item.areaLevel,
                        areaCode: item.areaCode
                    }
                    this.areaName = params.areaName
                    this.areaLevel = params.areaLevel
                    this.areaCode = params.areaCode

                    if (item.areaLevel == 'city') {
                        this.requestGetCityJSON(params)
                    }
                    if (item.areaLevel == 'district') {
                        this.requestGetDistrictsJSON(params)
                    }
                }
            }
        },

        // 返回上一级地图页
        clickBackMap() {
            if (this.deepTree.length) {
                this.deepTree.pop()
                let info = this.deepTree[this.deepTree.length - 1]
                let params = info.params

                this.areaName = params.areaName
                this.areaLevel = params.areaLevel
                this.areaCode = params.areaCode

                let areaName = params.areaName
                let data = info.mapData
                let mapData = data.features
                this.initEchantsMap(areaName, data, mapData)
            }
        },

        initEchantsMap(map, res, data = []) {
            this.loadTimer = null;
            this.setEchartsOption(map, res, data)
            this.mapDataSource = this.initSeriesData(data)
        },

        // 初始化地图图表
        setEchartsOption: async function(map, res, data = []) {
            if (this.chart) {
                this.chart.clear()
            }
            this.chart = this.$echarts.init(document.getElementById('chart_map'))
            this.$echarts.registerMap(map, res, data);

            this.getDataSource()
            let option = {
                geo: {
                    map: map,
                    ...mapOption.geoOption
                },
                series: [{
                    ...mapOption.geoSeries,
                    data: this.initSeriesData(data)
                }]
            }
            if (this.isMobile()) {
                option['geo']['zoom'] = 1.2
            }
            this.chart.setOption(option)
        },
        initSeriesData: function(data) {
            let temp = []
            let geoMapData = this.dataSource
            data.forEach((item, index) => {
                let obj = {}
                obj['properties'] = item['properties']
                obj['name'] = item['properties']['name']
                obj['areaName'] = item['properties']['name']
                obj['areaCode'] = item['properties']['adcode']
                obj['areaLevel'] = item['properties']['level']
                obj['value'] = [0, 0]
                let geoInfo = geoMapData.find((v) => v.code == item['properties']['adcode'])
                if (geoInfo) {
                    obj['geoInfo'] = geoInfo
                    obj['level'] = geoInfo['level']
                    obj['value'] = geoInfo['lat']
                }
                temp.push(obj)
            })

            return temp

        },

        /**
         * 定时刷新地图组件
         * @param timeLen 时长
         */
        refreshChartMap: function(timeLen = 1) {
            let time = new Date().getTime()
            let state = false
            this.dataSource.forEach((val, index) => {
                // 当前时间戳 - 列表动画时间 > timeLen
                // 时间戳转为秒 默认60秒
                let t = (1000 * 10 * timeLen)
                if ((time - val.time) > t) {
                    this.dataSource.splice(index, 1)
                    console.log('------------删除地图渲染动画-------------')
                    state = true
                }
            })
            if (state) {
                let res = this.deepTree[this.deepTree.length - 1]['mapData']
                this.setEchartsOption(this.areaName, res, res.features)
            }

        },

        // =====顶部数据统计请求=====
        // 获取服务机构数
        getDataSource: function() {
            if(!this.loadTimer){
                console.log('--------刷新数据 getDataSource ---------  ')
                this.loadTimer = new Date().getTime();
                let params = {
                    areaName: this.areaName,
                    areaLevel: this.areaLevel,
                    areaCode: this.areaCode
                }
                // this.getCenter1Data(params)
                this.getCenter2Data(params)
            }else{
                let time = new Date().getTime()
                // 时间戳转为秒 默认5分钟刷新一次
                let timeLen = (1000 * 10 * 6 * 5);
                if((time - this.loadTimer) > timeLen){
                    this.loadTimer = null;
                    this.getDataSource();
                }
            }
        },

        // async getCenter1Data(opt) {
        //     let params = {
        //         ...opt,
        //         state: 0
        //     }
        //     let res = await getAction('/hc/Statistical/InfusionBottleTop', params)
        //     if (res && res.success) {
        //         this.customerSum = res.result.customerCount
        //         this.glassbottleSum = res.result.glassbottleSum
        //         this.plasticbottleSum = res.result.plasticbottleSum
        //     }
        // },

        // 获取顶部数据
        async getCenter2Data(opt) {
            let params = { ...opt }
            let url = '/hc/Statistical/InfusionBottleTop'
            let res = await getAction(url, params)
            if (res && res.success) {
                this.customerSum = res.result.customerCount
                let glassWeight = parseFloat(res.result.glassbottleSum || 0)
                let plasticWeight = parseFloat(res.result.plasticbottleSum || 0)
                this.glassbottleSum = glassWeight;
                if (glassWeight > 10000) {
                    this.glassbottleSum = (glassWeight / 1000)
                    this.glassUnit = '吨'
                } else {
                    this.glassbottleSum = glassWeight
                    this.glassUnit = '千克'
                }
                this.plasticbottleSum = plasticWeight;
                if (plasticWeight > 10000) {
                    this.plasticbottleSum = (plasticWeight / 1000)
                    this.plasticUnit = '吨'
                } else {
                    this.plasticbottleSum = plasticWeight
                    this.plasticUnit = '千克'
                }
            }
        },

        // 时间格式化
        timeFormate(timeStamp) {
            //显示当前时间
            let newDate = new Date(timeStamp)
            let weeks = ['日', '一', '二', '三', '四', '五', '六']
            this.week = '星期' + weeks[newDate.getDay()]
            this.date = newDate.Format('yyyy-MM-dd')
            this.nowTime = newDate.Format('hh:mm:ss')
        },

        nowTimes() {
            this.timeFormate(new Date())
            setInterval(this.nowTimes, 1000)
            this.clear()
        },

        clear() {
            clearInterval(this.nowTimes)
            this.nowTimes = null
        }
    }
}
</script>

<style lang="less" scoped>
@font-face {
    font-family: 'iconfont';
    src: url('//at.alicdn.com/t/font_2059552_7jpvy617m72.eot');
    src: url('//at.alicdn.com/t/font_2059552_7jpvy617m72.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_2059552_7jpvy617m72.woff2') format('woff2'),
    url('//at.alicdn.com/t/font_2059552_7jpvy617m72.woff') format('woff'),
    url('//at.alicdn.com/t/font_2059552_7jpvy617m72.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_2059552_7jpvy617m72.svg#iconfont') format('svg');
}

li {
    list-style: none;
}

@font-face {
    font-family: 'electronicFont';
    src: url('~@assets/styles/fonts/DS-DIGIT.TTF') format('truetype');
}

.sum {
    background: rgba(0, 0, 0, 0.3);
}

.header {
    h2 {
        font-size: 0.4rem;
        text-align: center;
        letter-spacing: 1px;
    }
}

header {
    position: relative;
    background: url(~@assets/img/back/head.png) no-repeat top center;
    background-size: 100% 135%;
    padding-bottom: 1px;

    h2 {
        color: #7ef0ff;
        font-size: 0.475rem;
        text-align: center;
        line-height: 0.75rem;
        letter-spacing: 1px;
        margin-top: -25px;
    }

    .showTime {
        position: absolute;
        left: 0.8rem;
        top: 0.2rem;
        color: rgba(126, 240, 255, 0.7);
        display: flex;
        align-items: center;

        .time {
            font-size: 0.28rem;
            margin-right: 0.18rem;
        }

        .date {
            span {
                display: block;

                &:nth-child(1) {
                    font-size: 0.12rem;
                    text-align: right;
                }

                &:nth-child(2) {
                    font-size: 0.14rem;
                }
            }
        }
    }
}

.mainbox {
    min-width: 1024px;
    padding: 0.125rem 0.125rem 0;
    display: flex;

    .item {
        flex: 4;

        &.center {
            flex: 5;
            overflow: hidden;

            .resume {
                background: rgba(101, 132, 226, 0.1);
                padding: 0.1875rem;
                margin: 0 0.125rem 0.1rem;

                .resume-hd {
                    position: relative;
                    border: 1px solid rgba(25, 186, 139, 0.17);

                    ul {
                        display: flex;

                        .li-line {
                            content: '';
                            position: absolute;
                            height: 50%;
                            width: 1px;
                            background: rgba(255, 255, 255, 0.2);
                            top: 25%;
                        }

                        li {
                            position: relative;
                            flex: 1;
                            text-align: center;
                            height: 1.2rem;
                            line-height: 1.2rem;
                            font-size: 0.65rem;
                            color: #ffeb7b;
                            padding: 0.05rem 0;
                            // font-family: 'DIGITALDREAMFAT';
                            font-family: 'electronicFont';
                            font-weight: bold;

                            &:nth-child(2) {
                                &:after {
                                    .li-line;
                                    right: 0;
                                }

                                &:before {
                                    .li-line;
                                    left: 0;
                                }
                            }
                        }
                    }

                    &:before {
                        content: '';
                        position: absolute;
                        width: 30px;
                        height: 10px;
                        border-top: 2px solid #02a6b5;
                        border-left: 2px solid #02a6b5;
                        top: 0;
                        left: 0;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        width: 30px;
                        height: 10px;
                        border-bottom: 2px solid #02a6b5;
                        border-right: 2px solid #02a6b5;
                        right: 0;
                        bottom: 0;
                    }
                }

                .resume-bd {
                    ul {
                        display: flex;

                        li {
                            flex: 1;
                            height: 0.5rem;
                            line-height: 0.5rem;
                            text-align: center;
                            font-size: 0.225rem;
                            color: rgba(255, 255, 255, 0.7);
                            padding-top: 0.125rem;
                        }
                    }
                }
            }
        }

        .map-style {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6.475rem;
            height: 6.475rem;
            opacity: 0.3;
            background-size: 100% 100% !important;
        }

        .map {
            position: relative;
            height: 10.125rem;

            .chart {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 5;
                height: 10.125rem;
                width: 100%;
            }

            .map1 {
                .map-style;
                background: url(~@assets/img/brand/map.png) no-repeat;


            }

            .map2 {
                .map-style;
                width: 7.0375rem;
                height: 7.0375rem;
                background-image: url(~@assets/img/brand/jt.png);
                opacity: 0.6;
                -webkit-animation: rotate 15s linear infinite;
                animation: rotate 15s linear infinite;
                z-index: 2;

            }
        }

        .panel {
            overflow: hidden;
            position: relative;
            height: 3.875rem;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url(~@assets/img/brand/line.png);
            padding: 0 0.1875rem 0;
            margin-bottom: 0.1875rem;

            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
            }

            &:after {
                position: absolute;
                top: 0;
                right: 0;
                content: '';
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
            }

            .panel-footer {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;

                &:before {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;
                }

                &:after {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                }
            }

            h2 {
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                color: #7ef0ff;
                font-size: 0.225rem;
                font-weight: 400;

                a {
                    margin: 0 0.1875rem;
                    color: #fff;
                    text-decoration: none;
                }
            }

            .chart {
                height: 3rem;
            }
        }

        .panel-height {
            height: 7.9375rem;
        }

    }
}

.mainbox1 {
    padding: 0.125rem 0.125rem 0.125rem;

    .item {
        flex: 4;

        &.center {
            flex: 5;
            overflow: hidden;

            .resume {
                background: rgba(101, 132, 226, 0.1);
                padding: 0.1875rem;
                margin: 0 0.125rem 0.1rem;

                .resume-hd {
                    position: relative;
                    border: 1px solid rgba(25, 186, 139, 0.17);

                    ul {
                        display: flex;

                        .li-line {
                            content: '';
                            position: absolute;
                            height: 50%;
                            width: 1px;
                            background: rgba(255, 255, 255, 0.2);
                            top: 25%;
                        }

                        li {
                            position: relative;
                            flex: 1;
                            text-align: center;
                            height: 1.2rem;
                            line-height: 1.2rem;
                            font-size: 0.65rem;
                            color: #ffeb7b;
                            padding: 0.05rem 0;
                            // font-family: 'DIGITALDREAMFAT';
                            font-family: 'electronicFont';
                            font-weight: bold;

                            &:nth-child(2) {
                                &:after {
                                    .li-line;
                                    right: 0;
                                }

                                &:before {
                                    .li-line;
                                    left: 0;
                                }
                            }
                        }
                    }

                    &:before {
                        content: '';
                        position: absolute;
                        width: 30px;
                        height: 10px;
                        border-top: 2px solid #02a6b5;
                        border-left: 2px solid #02a6b5;
                        top: 0;
                        left: 0;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        width: 30px;
                        height: 10px;
                        border-bottom: 2px solid #02a6b5;
                        border-right: 2px solid #02a6b5;
                        right: 0;
                        bottom: 0;
                    }
                }

                .resume-bd {
                    ul {
                        display: flex;

                        li {
                            flex: 1;
                            height: 0.5rem;
                            line-height: 0.5rem;
                            text-align: center;
                            font-size: 0.225rem;
                            color: rgba(255, 255, 255, 0.7);
                            padding-top: 0.125rem;
                        }
                    }
                }
            }
        }

        .map-style {
            transform: translate(-50%, -50%);
            width: 6.475rem;
            height: 6.475rem;
            opacity: 0.3;
            background-size: 100% 100%;
        }

        .map {
            height: 10rem;

            .chart {
                z-index: 5;
                height: 10.5rem;
                width: 100%;
            }
        }

        .panel {
            overflow: hidden;
            position: relative;
            height: 4.2rem;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: rgba(255, 255, 255, 0.04) url(~@assets/img/brand/line.png);
            padding: 0 0.1875rem 0;
            margin-bottom: 0.1875rem;

            &:before {
                position: absolute;
                top: 0;
                left: 0;
                content: '';
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
            }

            &:after {
                position: absolute;
                top: 0;
                right: 0;
                content: '';
                width: 10px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
            }

            .panel-footer {
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;

                &:before {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-left: 2px solid #02a6b5;
                }

                &:after {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    content: '';
                    width: 10px;
                    height: 10px;
                    border-bottom: 2px solid #02a6b5;
                    border-right: 2px solid #02a6b5;
                }
            }

            h2 {
                height: 0.6rem;
                line-height: 0.6rem;
                text-align: center;
                color: #7ef0ff;
                font-size: 0.225rem;
                font-weight: 400;

                a {
                    margin: 0 0.1875rem;
                    color: #fff;
                    text-decoration: none;
                }
            }

            .chart {
                height: 3rem;
            }
        }

        .panel-height {
            height: 7.9375rem;
        }

    }
}


@-webkit-keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size: 42px !important;
    }
}

@media screen and (min-width: 1920) {
    html {
        font-size: 80px !important;
    }
}
</style>
